<%--
  Created by IntelliJ IDEA.
  User: jali
  Date: 2018/12/4
  Time: 23:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="C" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<jsp:include page="/common.jsp"></jsp:include>
<head>
    <title>积小成多</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>

    <%--
        web路径：
        不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。
        以/开始的相对路径，找资源，以服务器的路径为标准（http://localhost:8080）
        http://localhost:8080/curd
    --%>

</head>
<style>
    .tooltip-inner{
        background: #337AB7 !important; /*修改背景色*/
        text-align: left !important;/*//字体左对齐*/
        color:#ffffff !important;/*//字体颜色*/
        border:1px solid #dedede;/*//添加boder*/
        max-width: 400px !important;/*//修改宽度*/
    }
    .tooltip-arrow{
        border-bottom-color: #337AB7 !important;/*//修改三角形的颜色*/
        opacity: 0;/*//三角形透明*/
    }
    .tooltip{
        opacity: 1 !important;/*//让整个tooltip不透明*/
    }
</style>
<body>
<img src="${APP_PATH}/img/title.png">

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">首页 <span class="sr-only">(current)</span></a></li>
                <li class="active"><a href="${APP_PATH}/getTaskItems">我的积分</a></li>
                <li><a href="${APP_PATH}/jaAwardList">积分兑换</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<!-- Modal -->
<div class="modal fade bs-example-modal-lg" id="taskItemModel" tabindex="-1" role="dialog" aria-labelledby="taskItemModelLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="taskItemModelLabel"></h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">关卡名</label>
                        <div class="col-sm-10">
                            <p id="model_title" class="form-control-static"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">分数</label>
                        <div class="col-sm-10">
                            <p id="model_score" class="form-control-static"></p>
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label for="model_useTime" class="col-sm-2 control-label">时间花费</label>
                        <div class="col-xs-2">
                            <input type="text" class="form-control" id="model_useTime" name="usetime">
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer" id="model_footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn" id="taskItem_finish_btn">通过</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->

<div class="container">
    <%--标题--%>
    <div class="row">
        <div class="col-md-12">
            <h1>我的积分：<span id="myScore"></span></h1>
        </div>
    </div>
    <%--任务--%>
    <div id="taskContainer">

    </div>
    <%--按钮--%>
    <%--<div class="row">
        <div class="col-md-4 col-md-offset-10">
            <button class="btn btn-primary" id="emp_add_btn">新增</button>
            <button class="btn btn-danger" id="emp_del_btn">删除</button>
        </div>
    </div>--%>

    <%--显示表格数据--%>
    <%--<div class="row">
        <div class="col-md-12">
            <table class="table table-hover" id="emps_table">
                <thead>
                <tr>
                    <th><input type="checkbox" id="check_all"></th>
                    <th>#</th>
                    <th>title</th>
                    <th>useTime</th>
                    <th>score</th>
                    <th>status</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>--%>
    <%--分页--%>
    <%--<div class="row">
        &lt;%&ndash;分页文字信息&ndash;%&gt;
        <div class="col-md-6" id="page_info_area">
        </div>

        &lt;%&ndash;分页条信息&ndash;%&gt;
        <div class="col-md-6" id="page_nav_area">

        </div>
    </div>--%>

</div>
<script type="text/javascript">

    //全局变量总记录数
    var recordTotal;
    //当前页码
    var pageNum;

    //1、页面加载完成后，直接去发送ajax请求，要到分页数据
    $(function () {
        //页面第一次加载
        showTasks();
        //to_page(1);
        showMyScore();
    });

    $(function () {
        $('[data-toggle="tooltip"]').tooltip();
    })

    function showTasks() {
        $.ajax({
            url:"${APP_PATH}/showTasks",
            type:"GET",
            success:function (result) {
                build_taskInfo(result);
            }
        });
    }

    function build_taskInfo(result) {
        var taskContainerTd = $("#taskContainer");
        taskContainerTd.empty();
        var tasks = result.extend.tasks;
        $.each(tasks,function (index,item) {
            var btnTd = $("<button type=\"button\" class=\"btn \"></button>");
            btnTd.append(item.title);
            if(item.status=="1"){
                btnTd.addClass("btn-primary");
            }else{
                btnTd.addClass("btn-default");
            }
            var taskDiv = $("<div></div>");
            taskDiv.addClass("row");
            var upTaskDiv = $("<div></div>");
            upTaskDiv.addClass("col-lg-1");
            upTaskDiv.append(btnTd);
            var mainTaskDiv = $("<div><div>");
            mainTaskDiv.addClass("col-lg-11");
            mainTaskDiv.attr("style","height: 34px;line-height: 34px;font-size: large;color: #d9534f;");
            mainTaskDiv.append($("<div class='col-lg-1'></div>"));
            mainTaskDiv.append("<div class='col-lg-3'>关卡总分："+item.totalScore+"</div>");
            mainTaskDiv.append("<div class='col-lg-3'>剩余可得："+item.unFinishScore+"<div>");
            mainTaskDiv.append("<div class='col-lg-3'>完成得分："+item.score+"<div>");
            taskDiv.append(upTaskDiv).append(mainTaskDiv);
            var taskItems = item.jaTaskItems;
            var hrTd1 = $("<hr>");
            var hrTd2 = $("<hr>");
            var rowNode = $("<div class=\"row\"><div>");
            $.each(taskItems,function (idx,taskItem) {
                var sunNode = $("<div class=\"col-xs-12 col-sm-1\"></div>");
                var sunBtnNode = $("<button id="+taskItem.id+" style=\"margin-top: 4px;width:74px; outline: none;\" onclick=\"changeCol("+taskItem.id+")\"></button>");
                sunBtnNode.addClass("btn");
                if("1"==taskItem.status){
                    sunBtnNode.addClass("btn-primary");
                }else{
                    sunBtnNode.addClass("btn-default");
                }
                sunBtnNode.attr("title",taskItem.title);
                sunBtnNode.attr("data-toggle","tooltip");
                sunBtnNode.attr("data-placement","top");
                sunBtnNode.append("第"+taskItem.seqNum+"关");
                sunBtnNode.tooltip();
                sunNode.append(sunBtnNode);
                rowNode.append(sunNode);
            })
            taskContainerTd.append(taskDiv).append(hrTd1).append(rowNode).append(hrTd2);
        })
    }

    function changeCol(id) {
        $.ajax({
            url:"${APP_PATH}/getTaskItem/"+id,
            type:"GET",
            success:function (result) {
                $("#taskItemModelLabel").empty();
                $("#model_title").empty();
                $("#model_score").empty();
                var item = result.extend.item;
                $('#taskItem_finish_btn').attr("edit-id",item.id);
                var finishBtn = $("#taskItem_finish_btn");
                if(item.status=="1"){
                    $("#model_useTime").val(item.usetime);
                    $("#model_useTime").attr("readonly",true);
                    finishBtn.removeClass("btn-danger");
                    finishBtn.addClass("btn-success");
                    finishBtn.attr("disabled","disabled");
                    finishBtn.text("已通过");
                }else{
                    $("#model_useTime").attr("readonly",false);
                    $("#model_useTime").val("");
                    finishBtn.removeClass("btn-success");
                    finishBtn.addClass("btn-danger");
                    finishBtn.removeAttr("disabled");
                    finishBtn.text("通过");
                }

                $("#taskItemModelLabel").append("第" + item.seqNum + "关");
                $("#model_title").append(item.title);
                $("#model_score").append(item.score + "分");
                $("#model_useTime").parent().removeClass("has-error");
            }
        })
        $('#taskItemModel').modal({
            //点击框外的区域不会关闭弹框
            backdrop : "static"
        });
        //$("#" + id).addClass("btn-primary");
    }

    /*function build_taskItem_table(result) {
        $("#emps_table tbody").empty();
        $("#check_all").prop("checked",false);
        var emps = result.extend.pageInfo.list;
        $.each(emps,function (index,item) {
            var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
            var itemIdTd = $("<td></td>").append(item.id);
            var titleTd = $("<td></td>").append(item.title);
            var useTimeTd = $("<td></td>").append(item.useTime);
            var scoreTd = $("<td></td>").append(item.score);
            var statusTd = $("<td></td>").append(item.status);
            var editBtn = $("<button></button>").addClass("btn btn-primary edit_btn").append("完成");
            editBtn.attr("edit-id",item.id);
            var delBtn = $("<button></button>").addClass("btn btn-danger del_btn").append("删除");
            delBtn.attr("edit-id",item.id);
            var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
            //$("<tr></tr>").append(checkBoxTd).append(itemIdTd).append(titleTd).append(useTimeTd).append(scoreTd).append(statusTd).append(btnTd)
                //.appendTo("#emps_table tbody");
        })
    }*/

    function showMyScore(){
        $.ajax({
            url:"${APP_PATH}/getMyScore",
            type:"GET",
            success:function (result) {
                var myScore = result.extend.score;
                $("#myScore").text(myScore);
            }

        })
    }

    $("#taskItem_finish_btn").click(function () {
        if(!validateUseTime("model_useTime")){
            return false;
        }
        $.ajax({
            url:"${APP_PATH}/taskItem/"+$(this).attr("edit-id"),
            type:"PUT",
            data:$("#taskItemModel form").serialize(),
            success:function (result) {
                $("#taskItemModel").modal("hide");
                showTasks();
                showMyScore();
            }
        })
    });

    function validateUseTime(id) {
        var useTime = $("#"+id).val();
        if(useTime==null||useTime==''){
            show_validate_smg("#"+id,"error","使用时间不能为空");
            return false;
        }else{
            return true;
        }
    }

    function show_validate_smg(ele,status,msg) {
        $(ele).parent().removeClass("has-error has-success");
        if("error"==status){
            $(ele).parent().addClass("has-error");
            $(ele).next("span").text(msg);
        }else if("success"==status){
            $(ele).parent().addClass("has-success");
            $(ele).next("span").text(msg);
        }
    }

    /*批量造数据*/
    /*function makeData() {
        $.ajax({
            url:"$ {APP_PATH}/makeJaTaskItems",
            type:"GET",
            success:function (result) {
            }
        })
    }*/

</script>
</body>
</html>
